<template>
  <!-- <div :class="className" :style="{height:height,width:width}" /> -->
  <!-- <div style="height: 440px;"> -->
  <div style="padding-bottom: 14px;">  
    <div class="fontWeight biaoti">人员统计<el-tooltip class="item" effect="dark" content="只支持查询一年内的数据" placement="right"><i class="el-icon-question tipQuestion"></i></el-tooltip></div>
    <div class="flex flex-end mt20 mb2">
      <el-row :gutter="20">
        <el-col :span="24" :xs="24">
          <el-form :model="queryParams" ref="queryForm" :inline="true">
            <el-form-item prop="companyId">
              <el-select style="width:170px" v-model="queryParams.companyId" multiple collapse-tags placeholder="请选择客户企业" clearable filterable>
                <el-option
                  v-for="dict in clientEnterpriseOptions"
                  :key="dict.id"
                  :label="dict.companyName"
                  :value="dict.id"

                />
              </el-select> 
            </el-form-item>
            <el-form-item prop="startTime">
              <el-date-picker
              style="width:135px"
              v-model="queryParams.startTime"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="开始日期"
              :editable="false"
              :clearable="false"
              :picker-options="pickerOptions"
              >
              </el-date-picker>
          </el-form-item>
          <el-form-item>-</el-form-item>
            <!-- <span style="padding:7px 5px">-</span>:picker-options="pickerOptions"-->
          <el-form-item prop="endTime">
              <el-date-picker
              style="width:135px"
              v-model="queryParams.endTime"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="结束日期"
              :editable="false"
              :clearable="false"
              :picker-options="pickerOptions"
              >
              </el-date-picker>
          </el-form-item>
          <el-form-item>
            <!-- <el-button type="primary" icon="el-icon-search" size="medium" @click="handleQuery" style="padding:10px">搜索</el-button> -->
            <el-button icon="el-icon-search" size="medium" @click="handleQuery"  style="padding:10px">搜索</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    </div>
    <div class="font12 text-333 mb15 text-right pr10">总人数：{{ userCountSum }}</div>
    <div style="height:300px;width:100%" id="myChart_bar">
    
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'
import { userCount } from "@/api/index";
const animationDuration = 6000

export default {
  mixins: [resize],
  // props: {
  //   className: {
  //     type: String,
  //     default: 'chart'
  //   },
  //   width: {
  //     type: String,
  //     default: '100%'
  //   },
  //   height: {
  //     type: String,
  //     default: '300px'
  //   }
  // },
  data() {
    return {
      chart: null,
      queryParams: {
        companyId: undefined,
        startTime: undefined,
        endTime: undefined,
      },
      pickerOptions: {
            disabledDate(time) {
                let curDate = (new Date()).getTime();
                let twelve = 366 * 24 * 3600 * 1000;
                let twelveMonths = curDate - twelve;
                return time.getTime() > Date.now() || time.getTime() < twelveMonths;
            }
      },
      clientEnterpriseOptions: [], // 所有客户企业下拉列表信息数据字典数据
      userCountSum:0
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.getList()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  created() {
    this.getClientEnterprise().then(response => {
      this.clientEnterpriseOptions = response.data;
    });
    this.getDateTime();
    this.getDateTime1();
  },
  methods: {
    getDateTime(){
      var now = new Date();
      var year = now.getFullYear();// 得到年份
      var month = now.getMonth(); // 得到月份
      var date = now.getDate(); // 得到日期
      var month = month;
      var month = month.toString().padStart(2, '0');
      var date = date.toString().padStart(2, '0');
      var defaultDate = `${year}-${month}-${date}`;
      this.queryParams.startTime = defaultDate;
    },
    getDateTime1(){
      var now = new Date()
      var year = now.getFullYear() // 得到年份
      var month = now.getMonth() // 得到月份
      var date = now.getDate() // 得到日期
      month = month + 1
      month = month.toString().padStart(2, '0')
      date = date.toString().padStart(2, '0')
      var defaultDate = `${year}-${month}-${date}`
      this.queryParams.endTime = defaultDate
    },
    getList() {
       userCount(this.queryParams).then((response) => {
        this.userCountSum = response.data.userCountSum;
        this.chart = echarts.init(document.getElementById('myChart_bar'), 'macarons')
        this.chart.setOption({
          title: {
            text: '单位：人',
            textStyle: {
                color: '#999',
                fontSize: '12px'
            }
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
              type: 'none' // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {
            left: '2%',
            right: '2%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [{
            type: 'category',
            data: response.data.xaxisDate,
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#333'
                },
                //rotate: 40, //设置日期显示样式（倾斜度）
                formatter: function (value) {//在这里写你需要的时间格式
                  var t_date = new Date(value);
                  return [t_date.getMonth() + 1 < 10 ? '0'+(t_date.getMonth()+1) : t_date.getMonth()+1, t_date.getDate() < 10 ? '0'+(t_date.getDate()) : t_date.getDate()].join('-')
                }
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            }
          }],
          yAxis: [{
            type: 'value',
            minInterval: 1,
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#333'
                }
            },
            splitLine: {
                show: true,
                lineStyle:{
                  color: '#f0f0f0',
                  width: 1,
                  type: 'solid'
              }
        　　},
            splitArea: {
                show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            }
          }],
          series: [{
            name: '人数',
            type: 'bar',
            barWidth: '8',
            itemStyle: {
              color: '#045aff'
            },
            data: response.data.dayCountTOXAxisDate,
            animationDuration
          }]
        }) 
      }).catch(()=>{}); 
    },
    handleQuery() {
      this.getList();
    }
  }
}
</script>
<style scoped lang="scss">
    @media screen and (max-width: 480px) {
      .mb2{
        margin-bottom:0;
      }
    }
// select的tags过长显示...
::v-deep .el-select__tags-text {
  max-width: 40px!important;
}
</style>